
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1"> 教程</span>
</h1><div class="tutintro">
<img decoding="async" src="https://www.runoob.com/wp-content/uploads/2013/07/css-logo.png"/>
<p><strong>CSS</strong> (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，<strong>CSS</strong> 文件扩展名为 <span class="marked">.css</span>。</p>
<p>通过使用 <strong>CSS</strong> 我们可以大大提升网页开发的工作效率！</p>
<p>在我们的 <strong>CSS</strong> 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。</p>
<p><strong>CSS3</strong> 现在已被大部分现代浏览器支持，而下一版的 <strong>CSS4</strong> 仍在开发中。</p>
</div>
<h2 class="tutheader">各章节实例</h2>
<p>本 CSS 教程包含了数百个 CSS 在线实例</p>
<p>通过本站的在线编辑器，你可以在线编辑 CSS，并且可以在线查看修改后的效果。</p>
<div class="example">
<h2 class="example_head">CSS 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">body</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-var">#d0e4fe</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h1</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-code">orange</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">text-align:</span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">font-family:</span><span class="hl-code">"</span><span class="hl-code">Times</span><span class="hl-code"> </span><span class="hl-code">New</span><span class="hl-code"> </span><span class="hl-code">Roman</span><span class="hl-code">"</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">font-size:</span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<p><b>点击 "尝试一下" 按钮查看css是如何工作的。</b></p>
<h2 class="tutheader">CSS 实例</h2>
<p>css 在线150个实例，通过本站编辑器，你可以学习在线查看修改后css的运行效果。</p>
<p><a  rel="noopener" target="_blank">尝试一下!</a></p>
<h2 class="tutheader">HTML/CSS/JS 在线工具</h2>
<p>HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：<a  rel="noopener" target="_blank">https://c.runoob.com/front-end/61</a></p>
<h2 class="tutheader">CSS 参考手册</h2>
<p>在菜鸟教程中你可以找到更完整的CSS属性、选择器的语法，浏览器支持等资料.</p>
<p><a  rel="noopener" target="_blank">CSS 属性</a> </p>
<p><a  rel="noopener" target="_blank">CSS 选择器参考手册</a></p>
<p><a  rel="noopener" target="_blank">CSS 声音参考手册</a></p>
<p><a  rel="noopener" target="_blank">CSS 单位</a></p>
<p><a  rel="noopener" target="_blank">CSS 颜色参考手册</a></p> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    